import React, { FC, ReactElement, useState, useEffect, ReactNode } from 'react';
import { Button, Table, Tag, message, Modal, Tabs } from 'antd';
import style from './index.less';
import { getActivityList, removeActivity } from '@/services';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { history } from 'umi';
import { searchFormType } from '.';
import SearchForm from './component/SearchForm';

const { TabPane } = Tabs;
const { confirm } = Modal;
interface IPager {
  children: ReactNode;
  location: {
    pathname: string;
  };
}
const ActivitySetup: FC<IPager> = (props): ReactElement => {
  const tableColumns = [
    {
      title: '活动名称',
      dataIndex: 'activityName',
      key: 'activityName',
    },
    {
      title: '创建人',
      dataIndex: 'creator',
      key: 'creator',
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreated',
      key: 'gmtCreated',
    },
    {
      title: '活动时间',
      dataIndex: 'startDate',
      key: 'startDate',
    },
    {
      title: '状态',
      key: 'activityStatus',
      dataIndex: 'activityStatus',
      render: (state: number, record: any) => (
        <Tag color={stateList[state - 1].color} key={record.id}>
          {!record.isDraft ? stateList[state - 1].name : '草稿'}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (text: any, record: any) =>
        record.isDraft ? (
          <div key={record.id}>
            <Button
              type="link"
              onClick={() => {
                deleteItem(record.activityBasicId);
              }}
            >
              删除
            </Button>
            <Button
              type="link"
              onClick={() => {
                history.push(
                  `/createActivity/CreateSet?activityBasicId=${record.activityBasicId}`,
                );
              }}
              style={{ marginLeft: '10px' }}
            >
              编辑
            </Button>
          </div>
        ) : (
          <div key={record.id}>
            <Button
              type="link"
              onClick={() => {
                history.push(
                  `/createActivity/activityDetail?activityBasicId=${record.activityBasicId}`,
                );
              }}
              style={{ marginLeft: '10px' }}
            >
              详情
            </Button>
          </div>
        ),
    },
  ];
  const [tableData, setTableData] = useState([]);
  const [total, setTotal] = useState(0);
  const [searchForm, setSearchForm] = useState<searchFormType>({
    activityName: '',
    activityStatus: [],
    queryStartDate: '',
    queryEndDate: '',
    isDraft: 0,
    page: 1,
    pageSize: 20,
  });

  const checkBarType = (barIndex: String) => {
    let setSearchData = {
      ...searchForm,
      activityStatus:
        barIndex === '0' || barIndex === '6'
          ? []
          : barIndex === '5'
          ? [5, 6]
          : [Number(barIndex)],
      isDraft: barIndex === '6' ? 1 : 0,
      page: 1,
      pageSize: 10,
    };
    searchFrom(setSearchData);
  };
  const searchFrom = (searchType: searchFormType) => {
    setSearchForm(searchType);
    getActivityList(searchType).then((res) => {
      if (res.code === 200) {
        setTableData(res.data.rows);
        setTotal(res.data.total);
      }
    });
  };
  const deleteItem = (removeId: string) => {
    confirm({
      title: '确认删除该条数据吗?',
      icon: <ExclamationCircleOutlined />,
      okText: '确认',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        removeActivity({ activityBasicIds: [removeId] }).then((res) => {
          if (res.code === 200) {
            message.success('删除成功!');
            searchFrom(searchForm);
          } else {
            message.error(res.message);
          }
        });
      },
    });
  };

  const tablePageChange = (page: number, pageSize: number) => {
    let searchData = { ...searchForm, page, pageSize };
    searchFrom(searchData);
  };
  useEffect(() => {
    searchFrom(searchForm);
  }, []);
  const { createActivityBox } = style;
  return (
    <div className={createActivityBox}>
      <Tabs defaultActiveKey="0" onChange={checkBarType}>
        {menuBarList.map((item: any, index: number) => {
          return <TabPane tab={item.label} key={index} />;
        })}
      </Tabs>
      <SearchForm
        setTableData={setTableData}
        setTotal={setTotal}
        searchForm={searchForm}
        setSearchForm={setSearchForm}
      />
      <Button
        type="primary"
        onClick={() => {
          history.push('/createActivity/CreateSet');
        }}
      >
        创建活动
      </Button>
      <Table
        columns={tableColumns}
        dataSource={tableData}
        rowKey={(record) => record.id}
        pagination={{
          total,
          pageSize: 20,
          showTotal: () => `共 ${total} 条`,
          onChange: tablePageChange,
        }}
      />
    </div>
  );
};
export default ActivitySetup;
const menuBarList = [
  {
    label: '全部',
    activityStatus: 0,
    checked: true,
  },
  {
    label: '待审核',
    activityStatus: 1,
    checked: false,
  },
  {
    label: '进行中',
    activityStatus: 2,
    checked: false,
  },
  {
    label: '未开始',
    activityStatus: 3,
    checked: false,
  },
  {
    label: '已驳回',
    activityStatus: 4,
    checked: false,
  },
  {
    label: '已结束',
    activityStatus: 5,
    checked: false,
  },
  {
    label: '草稿',
    activityStatus: 6,
    checked: false,
  },
];
const stateList = [
  { name: '待审核', color: 'blue' },
  { name: '进行中', color: 'green' },
  { name: '未开始', color: 'orange' },
  { name: '已驳回', color: 'red' },
  { name: '已结束', color: '' },
  { name: '已结束', color: '' },
];
